<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Techro</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.useso.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
	<title><s:property value="category.categoryName"/></title>
    <link rel="stylesheet" type="text/css" href="<s:url value="/inc/style.css"/>">
    <script type="text/javascript" src="<s:url value="/js/jquery.js"/>"></script>
	
</head>

<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse">
       <div class="container">
            <div class="navbar-header">
                <!-- Button for smallest screens -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                <a class="navbar-brand" href="index.html">
                    <img src="assets/images/SJ.jpg" ></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="#">主页</a></li>
                    <li><a href="about.html">书籍列表</a></li>
                    <li><a href="services.html">个人信息</a></li>
                    <li><a href="portfolio.html">密码修改</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">我的借书 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="sidebar-right.html">Right Sidebar</a></li>
                            <li><a href="#">已借图书</a></li>
                            <li><a href="#">曾借图书</a></li>
                            <li><a href="#">超期图书</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">退出</a></li>

                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
    <!-- /.navbar -->



    <center>
    <s:action name="header" executeResult="true" namespace="/"/>
    <table width="900">
        <tr>
            <td height="20">当前位置>><s:property value="category.categoryName"/></td>
        </tr>
    </table>
    <form action="<s:url value="/book_list.action"/>" method="post">
        <input type="hidden" name="categoryId" value="<s:property value="model.categoryId"/>"/>
        <table width="900" height="20">
            <tr>
                <td width="8%">书名：</td>
                <td ><input type="text" name="bookName" value="<s:property value="model.bookName"/>">（模糊匹配）&nbsp;&nbsp;&nbsp;<input type="submit" value="查询"/></td>
            </tr>
        </table>
    </form>
    <table width="900" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#FFFFFF"  bordercolorlight="#888888">
        <tr bgcolor="#DDDDEE">
             <td height="35" width="10%">书籍标识</td>
            <td width="20%">书名</td>
            <td width="15%">类别</td>
            <td width="10%">作者</td>
            <td width="25%">出版社</td>
            <td width="20%">操作</td>
  

        </tr>
        <s:iterator value="bookList" id="b">
            <tr>
                <td height="35"><s:property value="#b.id"/></td>
                <td><img src="<s:url value="/upload/%{#b.pic}"/>" height="120" width="90"> <s:property value="#b.bookName"/> </td>
                <td><s:property value="#b.categoryName"/></td>
                <td><s:property value="#b.author"/></td>
                <td><s:property value="#b.publisher"/></td>
            
                <td><input type="button" data="<s:property value="#b.id"/>" class="lend_book_btn" value="借书"></td>
            </tr>
        </s:iterator>
    </table>
</center>
        <div class="footer1">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 panel">
                        <h3 class="panel-title">About Techro</h3>
                        <div class="panel-body">
                            <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Aenean leo lectus sollicitudin convallis eget libero. Aliquam laoreet tellus ut libero semper, egestas velit malesuada. Sed non risus eget dolor amet vestibulum ullamcorper. Integer feugiat molestie.</p>
                        </div>
                    </div>

                    <div class="col-md-4 panel contact">
                        <h3 class="panel-title">Contact Info</h3>
                        <div class="panel-body">
                            <p>Lorem ipsum dolor amet, consectetur adipiscing ipsum dolor.</p>
                            <ul>
                                <li><i class="fa fa-phone"></i>1-123-345-6789</li>
                                <li><a href="#"><i class="fa fa-envelope-o"></i>contact@</a></li>
                                <li><i class="fa fa-flag"></i>123 Smith Drive, Baltimore, MD 21212</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-3 panel">
                        <h3 class="panel-title">Follow me</h3>
                        <div class="panel-body">
                            <p class="follow-me-icons">
                                <a href=""><i class="fa fa-twitter fa-2"></i></a>
                                <a href=""><i class="fa fa-dribbble fa-2"></i></a>
                                <a href=""><i class="fa fa-github fa-2"></i></a>
                                <a href=""><i class="fa fa-facebook fa-2"></i></a>
                                <a href=""><i class="fa fa-youtube fa-2"></i></a>
                                <a href=""><i class="fa fa-pinterest fa-2"></i></a>
                            </p>
                        </div>
                    </div>

                </div>
                <!-- /row of panels -->
            </div>
        </div>

        <div class="footer2">
            <div class="container">
                <div class="row">

                    <div class="col-md-6 panel">
                        <div class="panel-body">
                            <p class="simplenav">
                                <a href="index.html">Home</a> | 
								<a href="about.html">About</a> |
								<a href="services.html">Services</a> |
								<a href="portfolio.html">Portfolio</a> |
								<a href="contact.html">Contact</a>
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 panel">
                        <div class="panel-body">
                            <p class="text-right">
                                Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>

                </div>
                <!-- /row of panels -->
            </div>
        </div>

    </footer>





    <!-- JavaScript libs are placed at the end of the document so the pages load faster -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="assets/js/custom.js"></script>
    
    <script type="text/javascript">
    function refreshPage(){
        self.location.href="<s:url value="/book_list.action"/>?categoryId=<s:property value="model.categoryId"/>&bookName=<s:property value="model.bookName"/>";
    }
    $(function(){
        $(".lend_book_btn").click(function(){
            var id = $(this).attr("data");
            $.ajax({
                type : "GET",
                url : '<s:url value="/lend_add.action"/>?id='+id+'&cback=?',
                dataType : "jsonp",
                jsonp: 'callback',
                success : function(json) {
                    alert(json.resultInfo);
                    refreshPage();
                }
            });
        })
    });
</script>


</body>
</html>
